CSS View Transition API: Kattava opas sulavan sivunavigoinnin toteuttamiseen

Web-navigointia on vuosikymmeniä määrittänyt karu todellisuus: tyhjä valkoinen ruutu. Linkin napsauttaminen merkitsi koko sivun uudelleenlatausta, lyhyttä välähdystä tyhjyydestä ja sitten uuden sisällön äkillistä ilmestymistä. Vaikka tämä kokemus on toimiva, siitä puuttuu sulavuus ja viimeistely, jota käyttäjät ovat tottuneet odottamaan natiivisovelluksilta. Yhden sivun sovellukset (SPA) nousivat ratkaisuksi käyttämällä monimutkaisia JavaScript-kehyksiä saumattomien siirtymien luomiseen, mutta usein arkkitehtonisen yksinkertaisuuden ja alkuperäisen lataussuorituskyvyn kustannuksella.

Entä jos meillä voisi olla molempien maailmojen parhaat puolet? Monisivuisen sovelluksen (MPA) yksinkertainen, palvelinpuolella renderöity arkkitehtuuri yhdistettynä SPA:n tyylikkäisiin ja merkityksellisiin siirtymiin. Tämä on CSS View Transition API:n lupaus, uraauurtava selainominaisuus, jonka on määrä mullistaa tapamme ajatella ja rakentaa käyttökokemuksia verkossa.

Tämä kattava opas vie sinut syvälle View Transition API:n maailmaan. Tutkimme, mikä se on, miksi se on monumentaalinen muutos web-kehitykselle ja miten voit toteuttaa sen tänään – sekä SPA:lle että, mikä vielä jännittävämpää, perinteisille MPA:lle. Valmistaudu hyvästelemään valkoinen välähdys ja toivottamaan tervetulleeksi uusi saumattoman web-navigoinnin aikakausi.

Mikä on CSS View Transition API?

CSS View Transition API on mekanismi, joka on rakennettu suoraan web-alustaan ja jonka avulla kehittäjät voivat luoda animoituja siirtymiä eri DOM (Document Object Model) -tilojen välillä. Ytimeltään se tarjoaa yksinkertaisen tavan hallita visuaalista muutosta näkymästä toiseen, tapahtuipa tämä muutos samalla sivulla (SPA:ssa) tai kahden eri dokumentin välillä (MPA:ssa).

Prosessi on hämmästyttävän nerokas. Kun siirtymä käynnistetään, selain:

1. Ottaa "kuvakaappauksen" nykyisestä sivun tilasta (vanha näkymä).
2. Antaa sinun päivittää DOM:n uuteen tilaan.
3. Ottaa "kuvakaappauksen" uuden sivun tilasta (uusi näkymä).
4. Asettaa vanhan näkymän kuvakaappauksen uuden, reaaliaikaisen näkymän päälle.
5. Animoi siirtymän näiden kahden välillä, tyypillisesti sulavalla ristihäivytyksellä oletusarvoisesti.

Koko prosessin orkestroi selain, mikä tekee siitä erittäin suorituskykyisen. Vielä tärkeämpää on, että se antaa kehittäjille täyden hallinnan animaatioon käyttämällä tavallista CSS:ää, mikä muuttaa aiemmin monimutkaisen JavaScript-tehtävän deklaratiiviseksi ja helposti lähestyttäväksi tyylittelyhaasteeksi.

Miksi tämä on mullistava asia web-kehitykselle

Tämän API:n käyttöönotto ei ole vain jälleen yksi asteittainen päivitys; se edustaa perustavanlaatuista parannusta web-alustaan. Tässä on syitä, miksi se on niin merkittävä kehittäjille ja käyttäjille ympäri maailmaa:

• Dramaattisesti parannettu käyttökokemus (UX): Sulavat siirtymät eivät ole pelkästään kosmeettisia. Ne tarjoavat visuaalista jatkuvuutta ja auttavat käyttäjiä ymmärtämään eri näkymien välisen suhteen. Elementti, joka kasvaa saumattomasti pikkukuvasta täysikokoiseksi kuvaksi, tarjoaa kontekstin ja ohjaa käyttäjän huomion, mikä tekee käyttöliittymästä intuitiivisemman ja responsiivisemman.
• Massiivisesti yksinkertaistettu kehitys: Ennen tätä API:a samankaltaisten efektien saavuttaminen vaati raskaita JavaScript-kirjastoja (kuten Framer Motion tai GSAP) tai monimutkaisia CSS-in-JS-ratkaisuja. View Transition API korvaa tämän monimutkaisuuden yksinkertaisella funktion kutsulla ja muutamalla rivillä CSS:ää, mikä alentaa kynnystä kauniiden, sovellusmaisten kokemusten luomiseen.
• Erinomainen suorituskyky: Siirtämällä animaatiologiikan selaimen renderöintimoottorille, näkymien siirtymät voivat olla suorituskykyisempiä ja akkukestävämpiä kuin niiden JavaScript-pohjaiset vastineet. Selain voi optimoida prosessin tavoilla, joita on vaikea toistaa manuaalisesti.
• SPA-MPA-jaon ylittäminen: Ehkä jännittävin näkökohta on sen tuki cross-document-siirtymille. Tämän ansiosta perinteiset, palvelinpuolella renderöidyt verkkosivustot (MPA) voivat ottaa käyttöön sulavan navigoinnin, jota on pitkään pidetty yksinoikeutena SPA:lle. Yritykset voivat nyt parantaa olemassa olevia verkkosivustojaan moderneilla UX-malleilla ilman, että niiden tarvitsee tehdä kallista ja monimutkaista arkkitehtonista siirtymistä täyteen SPA-kehykseen.

Peruskäsitteet: View Transitionien taustalla olevan taikuuden ymmärtäminen

API:n hallitsemiseksi sinun on ensin ymmärrettävä sen kaksi pääkomponenttia: JavaScript-käynnistin ja CSS-pseudo-elementtipuu, joka mahdollistaa mukauttamisen.

JavaScript-sisääntulopiste: `document.startViewTransition()`

Kaikki alkaa yhdestä JavaScript-funktiosta: `document.startViewTransition()`. Tämä funktio ottaa argumentiksi takaisinkutsun. Tämän takaisinkutsun sisällä suoritat kaikki DOM-manipulaatiot, jotka tarvitaan siirtymiseen vanhasta tilasta uuteen tilaan.

Tyypillinen kutsu näyttää tältä:

// Tarkista ensin, tukeeko selain API:a
if (!document.startViewTransition) {
  // Jos ei tueta, päivitä DOM suoraan
  updateTheDOM();
} else {
  // Jos tuetaan, kääri DOM-päivitys siirtymäfunktioon
  document.startViewTransition(() => {
    updateTheDOM();
  });
}

Kun kutsut `startViewTransition`-funktiota, selain käynnistää aiemmin kuvatun capture-update-animate-sekvenssin. Funktio palauttaa `ViewTransition`-objektin, joka sisältää lupauksia, joiden avulla voit kytkeytyä siirtymän elinkaaren eri vaiheisiin edistyneempää hallintaa varten.

CSS-pseudo-elementtipuu

Mukauttamisen todellinen teho piilee erityisessä CSS-pseudo-elementtien joukossa, jonka selain luo siirtymän aikana. Tämän väliaikaisen puun avulla voit tyylitellä vanhoja ja uusia näkymiä itsenäisesti.

• ::view-transition: Puun juuri, joka kattaa koko näkymän. Voit käyttää sitä taustavärin tai siirtymän keston määrittämiseen.
• ::view-transition-group(name): Edustaa yksittäistä siirtyvää elementtiä. Se on vastuussa elementin sijainnista ja koosta animaation aikana.
• ::view-transition-image-pair(name): Säiliö elementin vanhoille ja uusille näkymille. Se on tyylitelty eristävänä `mix-blend-mode`.
• ::view-transition-old(name): Kuvakaappaus elementistä sen vanhassa tilassa (esim. pikkukuva).
• ::view-transition-new(name): Elementin reaaliaikainen esitys sen uudessa tilassa (esim. täysikokoinen kuva).

Oletusarvoisesti ainoa elementti tässä puussa on `root`, joka edustaa koko sivua. Jos haluat animoida tiettyjä elementtejä tilojen välillä, sinun on annettava niille johdonmukainen `view-transition-name`.

Käytännön toteutus: Ensimmäinen View Transition (SPA-esimerkki)

Rakennetaan yleinen käyttöliittymämalli: korttiluettelo, joka napsautettaessa siirtyy yksityiskohtaiseen näkymään samalla sivulla. Avainasemassa on jaettu elementti, kuten kuva, joka muuntuu sulavasti kahden tilan välillä.

Vaihe 1: HTML-rakenne

Tarvitsemme säiliön luettelollemme ja säiliön yksityiskohtaiselle näkymälle. Vaihdamme luokan pääelementissä näyttääksemme toisen ja piilottaaksemme toisen.

<div id="app-container">
  <div class="list-view">
    <!-- Kortti 1 -->
    <div class="card" data-id="item-1">
      <img src="thumbnail-1.jpg" alt="Tuote 1">
      <h3>Tuote Yksi</h3>
    </div>
    <!-- Lisää kortteja... -->
  </div>   <div class="detail-view" hidden>
    <img src="large-1.jpg" alt="Tuote 1">
    <h1>Tuote Yksi</h1>
    <p>Yksityiskohtainen kuvaus tähän...</p>
    <button id="back-button">Takaisin</button>
  </div>
</div>

Vaihe 2: Määritä `view-transition-name`

Jotta selain ymmärtäisi, että pikkukuva ja yksityiskohtainen kuva ovat *sama käsitteellinen elementti*, meidän on annettava niille sama `view-transition-name` CSS:ssämme. Tämän nimen on oltava yksilöllinen jokaiselle siirtyvälle elementille sivulla minä tahansa tiettynä aikana.

.card.active img {
  view-transition-name: product-image;
} .detail-view.active img {
  view-transition-name: product-image;
}

Käytämme `.active`-luokkaa, jonka lisäämme JavaScriptillä, varmistaaksemme, että vain näkyville elementeille määritetään nimi, mikä välttää ristiriitoja.

Vaihe 3: JavaScript-logiikka

Nyt kirjoitamme funktion, joka käsittelee DOM-päivityksen, ja käärimme sen `document.startViewTransition()`-funktioon.

function showDetailView(itemId) {
  const updateDOM = () => {
    // Lisää 'active'-luokka oikealle kortille ja yksityiskohtaiselle näkymälle
    // Tämä määrittää myös view-transition-name:n CSS:n kautta
    document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
    document.querySelector('.detail-view').classList.add('active');     // Piilota luettelo ja näytä yksityiskohtainen näkymä
    document.querySelector('.list-view').hidden = true;
    document.querySelector('.detail-view').hidden = false;
  };   if (!document.startViewTransition) {
    updateDOM();
    return;
  }   document.startViewTransition(() => updateDOM());
}

Tällä, kortin napsauttaminen käynnistää kuvan sulavan muunnosanimaation ja ristihäivytyksen muulle sivulle. Monimutkaista animaatioaikajanaa tai kirjastoa ei tarvita.

Seuraava rajapinta: Cross-Document View Transitionit MPA:lle

Tässä API muuttuu todella mullistavaksi. Näiden sulavien siirtymien soveltaminen perinteisiin Multi-Page Application (MPA) -sovelluksiin oli aiemmin mahdotonta muuttamatta niitä SPA:ksi. Nyt se on yksinkertainen valinta.

Cross-Document-siirtymien ottaminen käyttöön

Ota siirtymät käyttöön navigoinnille eri sivujen välillä lisäämällä yksinkertainen CSS-at-rule molempien lähde- ja kohdesivujen CSS:ään:

@view-transition {
  navigation: auto;
}

Se on siinä. Kun tämä sääntö on olemassa, selain käyttää automaattisesti näkymäsiirtymää (oletusarvoista ristihäivytystä) kaikissa saman alkuperän navigoinneissa.

Avain: Johdonmukainen `view-transition-name`

Aivan kuten SPA-esimerkissä, elementtien yhdistämisen taika kahdella erillisellä sivulla perustuu jaettuun, yksilölliseen `view-transition-name`:iin. Kuvitellaan tuoteluettelosivu (`/products`) ja tuotteen tietosivu (`/products/item-1`).

`products.html`-sivulla:

<a href="/products/item-1">
  <img src="thumbnail-1.jpg" style="view-transition-name: product-image-1;">
</a>

`product-detail.html`-sivulla:

<div class="hero">
  <img src="large-1.jpg" style="view-transition-name: product-image-1;">
</div>

Kun käyttäjä napsauttaa linkkiä ensimmäisellä sivulla, selain näkee elementin, jonka `view-transition-name: product-image-1` poistuu sivulta. Se odottaa sitten uuden sivun latautumista. Kun toinen sivu renderöidään, se löytää elementin, jolla on sama `view-transition-name`, ja luo automaattisesti sulavan muunnosanimaation näiden kahden välille. Muu sivun sisältö palautuu hienovaraiseen ristihäivytykseen. Tämä luo nopeuden ja jatkuvuuden tunteen, joka oli aiemmin mahdotonta MPA:lle.

Edistyneet tekniikat ja mukautukset

Oletusarvoinen ristihäivytys on tyylikäs, mutta API tarjoaa syvät mukautuskoukut CSS-animaatioiden avulla.

Animaatioiden mukauttaminen CSS:llä

Voit ohittaa oletusanimaatiot kohdistamalla pseudo-elementteihin tavallisilla CSS `@keyframes`- ja `animation`-ominaisuuksilla.

Esimerkiksi luodaksesi "liu'u sisään oikealta" -efektin uuden sivun sisällölle:

@keyframes slide-from-right {
  from { transform: translateX(100%); }
} ::view-transition-new(root) {
  animation: slide-from-right 0.5s ease-out;
}

Voit käyttää erilaisia animaatioita `::view-transition-old`- ja `::view-transition-new`-elementteihin eri elementeille luodaksesi erittäin koreografioituja ja kehittyneitä siirtymiä.

Siirtymätyyppien hallinta luokkien avulla

Yleinen vaatimus on, että eteen- ja taaksepäinnavigoinnille on erilaiset animaatiot. Esimerkiksi eteenpäinnavigointi voi liu'uttaa uuden sivun sisään oikealta, kun taas taaksepäinnavigointi liu'uttaa sen sisään vasemmalta. Tämä voidaan saavuttaa lisäämällä luokka dokumenttielementtiin (`<html>`) juuri ennen siirtymän käynnistämistä.

JavaScript 'takaisin'-painikkeelle:

backButton.addEventListener('click', (event) => {
  event.preventDefault();
  document.documentElement.classList.add('is-going-back');
  document.startViewTransition(() => {
    // Logiikka navigoidaksesi takaisin
    Promise.resolve().then(() => {
      document.documentElement.classList.remove('is-going-back');
    });
  });
});

CSS erilaisten animaatioiden määrittämiseksi:

/* Oletusarvoinen eteenpäin-animaatio */
::view-transition-new(root) {
  animation: slide-from-right 0.5s;
} /* Taaksepäin-animaatio */
.is-going-back::view-transition-new(root) {
  animation: slide-from-left 0.5s;
}

Tämä tehokas malli tarjoaa rakeisen hallinnan käyttäjän navigointikokemukseen.

Esteettömyysnäkökohdat

Moderni web-API olisi puutteellinen ilman vahvaa sisäänrakennettua esteettömyyttä, ja View Transition API toimittaa.

• Käyttäjän asetusten huomioiminen: API kunnioittaa automaattisesti `prefers-reduced-motion`-media querya. Jos käyttäjä on ilmoittanut haluavansa vähemmän liikettä käyttöjärjestelmänsä asetuksissa, siirtymä ohitetaan ja DOM-päivitys tapahtuu välittömästi. Tämä tapahtuu oletusarvoisesti ilman kehittäjältä vaadittavaa ylimääräistä työtä.
• Kohdistuksen säilyttäminen: Siirtymät ovat puhtaasti visuaalisia. Ne eivät häiritse tavallista kohdistuksenhallintaa. On edelleen kehittäjän vastuulla varmistaa, että siirtymän jälkeen näppäimistökohdistus siirretään uuden näkymän loogiseen elementtiin, kuten pääotsikkoon tai ensimmäiseen interaktiiviseen elementtiin.
• Semanttinen HTML: API on parannuskerros. Pohjana olevan HTML:n tulisi pysyä semanttisena ja esteettömänä. Käyttäjä, jolla on näytönlukija tai ei-tukeva selain, kokee sisällön ilman siirtymää, joten rakenteen on oltava itsessään järkevä.

Selainten tuki ja asteittainen parannus

Loppuvuodesta 2023 View Transition API SPA:lle on tuettu Chromium-pohjaisissa selaimissa (Chrome, Edge, Opera). Cross-document-siirtymät MPA:lle ovat saatavilla ominaisuuden lipun takana, ja niitä kehitetään aktiivisesti.

API suunniteltiin alusta alkaen asteittaista parannusta varten. Aiemmin käyttämämme suojamalli on avainasemassa:

if (!document.startViewTransition) { ... }

Tämä yksinkertainen tarkistus varmistaa, että koodisi yrittää luoda siirtymän vain selaimissa, jotka tukevat sitä. Vanhemmissa selaimissa DOM-päivitys tapahtuu välittömästi, kuten aina ennenkin. Tämä tarkoittaa, että voit alkaa käyttää API:a tänään parantaaksesi kokemusta nykyaikaisten selainten käyttäjille ilman negatiivista vaikutusta vanhempien selainten käyttäjille. Se on win-win-tilanne.

Web-navigoinnin tulevaisuus

View Transition API on enemmän kuin pelkkä työkalu silmää miellyttävien animaatioiden tekemiseen. Se on perustavanlaatuinen muutos, joka antaa kehittäjille mahdollisuuden luoda intuitiivisempia, yhtenäisempiä ja mukaansatempaavia käyttäjäpolkuja. Standardoimalla sivusiirtymiä web-alusta kuromaa umpeen natiivisovellusten välistä kuilua mahdollistaen uuden laadun ja viimeistelyn tason kaikentyyppisille verkkosivustoille.

Selainten tuen laajentuessa voimme odottaa näkevämme uuden luovuuden aallon web-suunnittelussa, jossa sivujen välinen matka suunnitellaan yhtä huolellisesti kuin itse sivut. SPA:n ja MPA:n väliset rajat hämärtyvät edelleen, jolloin tiimit voivat valita projektilleen parhaan arkkitehtuurin tinkimättä käyttökokemuksesta.

Johtopäätös: Aloita sulavampien kokemusten rakentaminen tänään

CSS View Transition API tarjoaa harvinaisen yhdistelmän tehokkaita ominaisuuksia ja huomattavaa yksinkertaisuutta. Se tarjoaa suorituskykyisen, esteettömän ja asteittain parannetun tavan nostaa sivustosi käyttökokemus toiminnallisesta ilahduttavaksi.

Rakennatpa monimutkaista SPA:ta tai perinteistä palvelinpuolella renderöityä verkkosivustoa, työkalut ovat nyt saatavilla poistamaan häiritsevät sivulataukset ja opastamaan käyttäjiä käyttöliittymässäsi sujuvilla, merkityksellisillä animaatioilla. Paras tapa ymmärtää sen voima on kokeilla sitä. Ota pieni osa sovelluksestasi – galleria, asetusivu tai tuotevirta – ja kokeile. Tulet hämmästymään, kuinka muutama koodirivi voi muuttaa verkkosivustosi tuntumaa perusteellisesti.

Valkoisen välähdyksen aikakausi on päättymässä. Web-navigoinnin tulevaisuus on saumaton, ja View Transition API:n avulla sinulla on kaikki mitä tarvitset sen rakentamiseen jo tänään.